import React, { Component } from 'react'
import { base, DongbaToLocalTime,} from 'nc-lightapp-front'
const { NCModal, NCPopover, } = base
import './curNodeDetail.less'
import classnames from 'classnames'
import {
    nccGetTheme,
} from 'src/erm/sscrppublic/common/utils/asyncFunctions.js';
import moment from 'moment';
import dataFormat from 'src/erm/sscrppublic/common/utils/dataFormat';

export default class CurNodeDetails extends Component {
    constructor(props) {
        super(); 
        this.state={
            isBlackTheme: false, // 是否为暗黑主题
        }

        this.wrap = React.createRef()
    }

    componentDidMount() {
        this.getTheme()
    }

    onEnter = () => {
        setTimeout(() => {
            const ulWrapper = document.getElementsByClassName('contract-operate_recode_date')[0]
            if (ulWrapper) ulWrapper.scrollIntoView(false)
        })
    }
    
    // 获取主题
    getTheme = async () => {
        const isBlackTheme = await nccGetTheme() === 'black'
        this.setState({isBlackTheme})
    }

    getLocalTime(_i) {
        let month = _i.getMonth() + 1
        if (month < 10) month = `0${month}`
        let date = _i.getDate()
        if (date < 10) date = `0${date}`
        let hours = _i.getHours()
        hours = hours.toString().length === 2 ? hours : `0${hours}`
        let mins = _i.getMinutes()
        mins = mins.toString().length === 2 ? mins : `0${mins}`
        let secs = _i.getSeconds()
        secs = secs.toString().length === 2 ? secs : `0${secs}`
        return `${_i.getFullYear()}-${month}-${date} ${hours}:${mins}:${secs}`
    }

    getLocalDealDate(dealdate) {
        const {_i} = DongbaToLocalTime(moment(dealdate))
        if (_i) {
            return dataFormat(this.getLocalTime(_i), 'datetime')
        } else {
            return dataFormat(dealdate, 'datetime')
        }
    }

    render() {
        const {
            MutiInit, showModal,
            hide, data, billno,
        } = this.props

        const multiLang = MutiInit.getIntl(1056), // 多语
            title = `${multiLang && multiLang.get('105602BZPT-0087')}  ${billno}` // 标题

        return (
            <div>
                <NCModal
                    id='cur-node-details'
                    fieldid='cur-node-details' 
                    show={showModal}
                    onHide={() => hide()}
                    onEnter={this.onEnter}
                >
                    <NCModal.Header closeButton>
                        <NCModal.Title>{ title }</NCModal.Title>
                    </NCModal.Header>
                    <NCModal.Body>
                        <ul class={classnames(
                            'contract-operate_recode_date', 
                            {'contract-operate_recode_date_black': this.state.isBlackTheme}
                        )} ref={this.wrap}>
                            {data.map((item, index, list) => {
                                return (
                                    <li>
                                        {/* 索引 */}
                                        <i className={classnames({'step-cur--idx': item.approveresult_key === 'DONT_HAVE'})}>
                                            {index + 1}
                                        </i>
                                        <div>
                                            <div className='record-left'>
                                                {/* 环节 */}
                                                <span className='approvelink nc-theme-common-font-c'>{item.approvelink}</span>
                                                {/* 操作人 */}
                                                <span className='dealman'>
                                                    {item.dealman[0]}
                                                    {/* 划动展示全部人名 */}
                                                    {
                                                        item.dealman.length > 1 &&
                                                        (
                                                            <NCPopover
                                                                trigger='hover'
                                                                placement='bottomRight'
                                                                content={(
                                                                    <ul>
                                                                        {item.dealman.map((each, idx) => (
                                                                            <li>{`${idx + 1}. ${each}`}</li>
                                                                        ))}
                                                                    </ul>
                                                                )}
                                                            >
                                                                <span>+{item.dealman.length - 1}</span>
                                                            </NCPopover>
                                                        )
                                                    }
                                                </span>
                                            </div>
                                            <div className='record-right nc-theme-otab-area-bgc'>
                                                {/* 操作类型标识 */}
                                                <i className={classnames(
                                                    'ssc-iconfont',
                                                    {
                                                        iconchenggong1: item.approveresult_key === 'COMMIT' || item.approveresult_key === 'YES',
                                                        iconfasong: item.approveresult_key === 'RE_COMMIT' || item.approveresult_key === 'DONT_HAVE',
                                                        iconbohui: item.approveresult_key === 'REJECT' || item.approveresult_key === 'NO',
                                                    }
                                                )}></i>
                                                <div className='record-right--top'>
                                                    {/* 操作结果 */}
                                                    <span className='approveresult'>{item.approveresult}</span>
                                                    {/* 操作日期 */}
                                                    <span className='dealdate nc-theme-common-font-c'>{
                                                        item.dealdate ? this.getLocalDealDate(item.dealdate) : item.handontime
                                                    }</span>
                                                </div>
                                                <div className='record-right--bottom'>
                                                    {/* 批语 */}
                                                    {item.checknote && <span className='checknote nc-theme-common-font-c'>{item.checknote}</span>}
                                                </div>
                                            </div>
                                        </div>
                                        {/* 步骤条竖线 */}
                                        <span className={classnames({'first-and-last--item': list.length === 1})}></span>
                                        {/* 最后一条的操作条竖线 */}
                                        { list.length !== 1 && index === list.length - 1 && <span></span>}
                                    </li> 
                                )
                            })}
                        </ul>
                    </NCModal.Body>
                </NCModal>
            </div>
        )
    }
}